<template>
  <div class="comprehensive-form-container">
    <el-card>
      <template #header>
        <span>添加车辆</span>
      </template>
      <el-row :gutter="20">
        <el-col
          :lg="{ span: 12, offset: 6 }"
          :md="{ span: 20, offset: 2 }"
          :sm="{ span: 20, offset: 2 }"
          :xl="{ span: 12, offset: 6 }"
          :xs="24"
        >
          <el-form
            ref="form"
            class="demo-form"
            :label-position="labelPosition"
            label-width="100px"
            :model="form"
            :rules="rules"
          >
            <el-form-item label="车牌号" prop="name">
              <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="控制设备编号" prop="name">
              <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="投放区域" prop="region">
              <el-select v-model="form.region" placeholder="请选择活动区域">
                <el-option label="区域一" value="shanghai" />
                <el-option label="区域二" value="beijing" />
              </el-select>
            </el-form-item>
            <el-form-item label="投放状态" prop="resource">
              <el-radio-group v-model="form.resource">
                <el-radio label="未投放" />
                <el-radio label="已投放" />
              </el-radio-group>
            </el-form-item>
            <el-form-item label="投放时间" prop="date">
              <el-date-picker
                v-model="form.date"
                placeholder="选择日期时间"
                type="datetime"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('form')">
                保存
              </el-button>
              <el-button @click="resetForm('form')">重置</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        labelPosition: 'right',
        form: {
          name: '',
          region: '',
          date: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          description: '',
          rate: 0,
          area: [],
          transfer: [],
        },
        rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            {
              min: 3,
              max: 5,
              message: '长度在 3 到 5 个字符',
              trigger: 'blur',
            },
          ],
          region: [
            { required: true, message: '请选择活动区域', trigger: 'change' },
          ],
          date: [
            {
              type: 'date',
              required: true,
              message: '请选择日期',
              trigger: 'change',
            },
          ],
          type: [
            {
              type: 'array',
              required: true,
              message: '请至少选择一个活动性质',
              trigger: 'change',
            },
          ],
          resource: [
            { required: true, message: '请选择活动资源', trigger: 'change' },
          ],
          description: [
            { required: true, message: '请填写活动形式', trigger: 'blur' },
          ],
        },
      }
    },
  }
</script>

<style></style>
